<template>
	<picker :index="index" :range="columns" range-key="name" @change="confrim">
	  <view class="text-center line-1">
	    <button class="btn-secondary" size="mini" plain>
	    	切换学生
	    </button>
	  </view>
	</picker>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { useUserStore } from '@/stores'
	const userStore = useUserStore()
	
	const emit = defineEmits(['onConfirm'])
	
	const columns = computed(() => userStore.studentList)
	
	const index = ref(-1)
	
	const confrim = (e) => {
		index.value = e.detail.value
		const stu = columns.value[index.value]
		userStore.setCurrentStudent(stu)
		emit('onConfirm', stu)
	}
</script>

<style lang="scss" scoped>
	.btn-secondary {
		color: $uni-color-primary;
		border: 1px solid $uni-color-primary;
	}
</style>